<template>
	<view class="cflex">
		<u-sticky>
		<view class="lbs_chioce dflex p12 f14 aic bg_fff jcsb">
			<view class="dflex">
				<u-icon name="list" color="#000"></u-icon>
				<text class="mr5">排序</text>
				<view class="lbs_text dflex">
					<text 
						:class="{ selected: selectedElement === item.key }"
						v-for="(item, index) in lbs_text" 
						@click="selectElement(item.key)"
						:key="index"
					>
						{{ item.name }}
					</text>
				</view>
			</view>
			<view class="dflex f14 aic" @click="gotoSearch">				
				<u-icon name="search" size="25"></u-icon>
				<text class="ml5 mr10">搜索</text>
			</view>
		</view>
		</u-sticky>
		<view class="p12">
			<view class="dflex p12 bg_fff radius10 mb12" v-for="(item, index) in merchant_list" :key="index" :data-shopid="item.id" @click="openShop">
				<view class="">
					<image :src="JSON.parse(item.store_pic)[0]" class="w105 radius5" mode="aspectFill"></image>
				</view>
				<view class="ml12 cflex fg1">
					<text class="f16 fbold u-line-1">{{item.company_name}}</text>
					<view class="dflex f12 ca3a3a3 mt5 jcsb">
						<text>{{item.goods_category}}</text>
						<text>已售{{item.fake_sell_count}}</text>
					</view>
					<view class="dflex f12 ca3a3a3 mt5 jcsb">
						<text class="u-line-1 mr12">{{item.location_name}}</text>
						<text class="u-line-1" style="min-width: 90px; text-align: right;">据您{{ item.distance.toFixed(1) }}公里</text>
					</view>
					<view class="mt5">
						<u-line></u-line>
					</view>
					<view class="mt5 dflex f12 aib u-line-1" v-for="(item2, index2) in item.merchant_goods" :key="index2">
						<text class="f10 main_price_color">￥</text>
						<text class="c3971e0 main_price_color fbold mr5">{{item2.merchant_goods_sell_price}}</text>
						<text class="f10 ca3a3a3 textDelete mr5">￥{{item2.merchant_goods_total_price}}</text>
						<text>{{item2.merchant_goods_title}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="dflex mt100 jcc" v-if="empty">
			<u-empty mode="data" text="啥都没有~"></u-empty>
		</view>
		
		<view class="dflex mt20 jcc">
			<text class="f12 ca3a3a3">{{loadTxt}}</text>
		</view>

		<view class="bottom_menu">
			<bottomMenu></bottomMenu>
		</view>
		
	</view>
</template>

<script>
	
	
	export default {
		data() {
			return {				
				selectedElement : 'default',
				lbs_text : [
					{
						name : '默认',
						key : 'default'
					},
					{
						name : '距离',
						key : 'lbs'
					},
					{
						name : '销量',
						key : 'sell'
					}
				],
				latitude : '',
				longitude : '',
				page : 0,
				merchant_list : [],
				empty : '',
				loadTxt : ''
			}
		},
		onLoad() {
			this.getLocationAuth()
		},
		onReachBottom() {
			if (this.page <= this.total_page && this.total_page != 0) {
				this.loadMerchantList();
			}
		},
		methods: {	
			//获取定位
			getLocationAuth(){
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.loadMerchantList()
					},
					fail(res) {
						uni.showToast({
							'title':'对不起，获取位置失败！',
							'icon':'none'
						})
					}
				})
			},
			loadMerchantList() {
				uni.showLoading({
					title: '加载中...',
					mask: false
				});
								
				uni.request({
					url: uni.getStorageSync('domain') + '/api/v1/merchant/list?page=' + (this.page + 1) + '&category=' + this.selectedElement,
					method: 'GET',
					data: {						
						'latitude' : this.latitude,
						'longitude' : this.longitude
					},
					success: res => {						
						
						if (res.data.data.total == null || res.data.data.total == 0) {
							this.total_page = 0
							this.loadTxt = '';
							this.empty = true
							uni.hideLoading();
						} else {
							this.total_page = res.data.data.last_page
							this.empty = false
							this.merchant_list = [...this.merchant_list,...res.data.data.data]
							this.page = res.data.data.current_page
							if(res.data.data.current_page == res.data.data.last_page)								
							{
								this.loadTxt = '没有更多数据了';
							}
							uni.hideLoading();
						}
						
						// console.log(res.data.data.data)
						// console.log('click.res.data',res.data);
						// this.addList(res.data)
						// this.ajax.page = res.data.meta.current_page
						// console.log('click.this.ajax.page',res.data.meta.current_page,this.ajax.page);
						// if (res.data.data.length == 0) {
						// 	this.empty = true
						// } else {
						// 	this.empty = false
						// }
						uni.hideLoading();
					},
					fail: () => {},
					complete: () => {}
				});
			},
			gotoSearch() {			
				uni.redirectTo({
					url:"/pages/search/search"
				});
			},
			selectElement(key) {
				uni.showLoading({
					title: '加载中...',
					mask: false
				});
				this.selectedElement = key
				this.page = 1
				
				uni.request({
					url: uni.getStorageSync('domain') + '/api/v1/merchant/list?page=' + this.page + '&category=' + this.selectedElement,
					method: 'GET',
					data: {						
						'latitude' : this.latitude,
						'longitude' : this.longitude
					},
					success: res => {
						
						this.merchant_list = []
						
						this.merchant_list = res.data.data.data
						
						uni.hideLoading();
					},
					fail: () => {},
					complete: () => {}
				});
			},
			openShop(e) {				
				var mid = e.currentTarget.dataset.shopid;
				uni.navigateTo({
					url:"/packageShop/shop/shop?mid=" + mid
				})
			},	
		}
	}
</script>

<style>
	page {
		background-color: #F6F7FB;
	}
	
	.lbs_text text {
		margin:0 6px;
		padding: 3px 6px;
	}
	
	.selected {
		background-color: #FFD84A;
		padding: 3px 6px;
		margin:0 6px;
		border-radius: 25px;
		
	}
</style>
